﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<header class="header-area inner-page">
    <th:block th:include="commons/front::public-resource">LOGIN</th:block>
    <th:block th:include="commons/front::login-bar">login-bar</th:block>
    <th:block th:include="commons/front::navigation">navigation</th:block>
    <link th:href="@{/public/front/css/page.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/public/front/js/jquery.z-pager.js}"></script>
    <title>灵感发现</title>
</header>
<body>

<section class="breadcrumb-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-xs-12 text-center">
                <div class="breadcrumb-content">
                    <h2>活动</h2>
                    <ul>
                        <li><a href="#">秒杀</a><span>/</span></li>
                        <li>折扣</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /.breadcrumb-section  -->

<!-- Event Section -->
<section class="event-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-xs-12" id="mixer-container-0">

            </div>
            <div class="col-sm-6 col-xs-12" id="mixer-container-1">

            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="page text-center">
                    <div id="pager" class="pager clearfix page"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /.event-section -->

<th:block th:include="commons/front::footer">FOOTER</th:block>

<template id="mixer-template-0">
    {%each(i,d) odd %}
        <div class="single-event">
            <div class="event-img" onclick="serviceDetail(${d.id})" style="cursor: pointer">
                <img src="${d.imgUrl}" alt="" style="width: 100%;">
                <div class="class-hover">
                    <a class="popup" href="#" onclick="serviceDetail(${d.id})"><span class="glyphicon glyphicon-link"></span></a>
                </div>
            </div>
            <h3><a href="#" onclick="serviceDetail(${d.id})" style="width: 100%;" class="text-single-line">${d.title}</a></h3>
            <label style="font-weight: normal">${d.activityStartTime} - ${d.activityEndTime}</label>
            <div style="color: #979797; font-size: 16px; line-height: 1.71">${d.address}</div>
            <p>
                ${d.descrptionText}
            </p>
        </div>
    {%/each%}
</template>

<template id="mixer-template-1">
    {%each(i,d) even %}
        <div class="single-event">
            <div class="event-img" onclick="serviceDetail(${d.id})" style="cursor: pointer">
                <img src="${d.imgUrl}" alt="">
                <div class="class-hover">
                    <a class="popup" href="#" onclick="serviceDetail(${d.id})"><span class="glyphicon glyphicon-link"></span></a>
                </div>
            </div>
            <h3><a href="#" onclick="serviceDetail(${d.id})">${d.title}</a></h3>
            <label style="font-weight: normal">${d.activityStartTime} - ${d.activityEndTime}</label>
            <div style="color: #979797; font-size: 16px; line-height: 1.71">${d.address}</div>
            <p>
                ${d.descrptionText}
            </p>
        </div>
    {%/each%}
</template>

<th:block th:include="commons/front::login">LOGIN</th:block>

<script>

    function serviceDetail(id) {
        location.href = ctx + '/front/service_detail/'+id;
    }

    $(function () {

        var pageSize = 10;
        $(document).on("click", "div.pager a", function () {
            var $this = $(this);
            var disabledAttr = $this.attr("disabled");
            if (disabledAttr != "undefined" && disabledAttr == "disabled") {
                return false;
            }

            var targetPage = $this.attr("page-id");
            var cs = $("div.pager span.current");
            var curPage = cs.attr("page-id");
            if (targetPage == curPage) {
                return;
            }

            loadPage(parseInt(targetPage));
        });

        var loadPage = function (page) {
            $.get(ctx + "/front/service_data", {pageNo: page, pageSize: pageSize}, function (rtn) {
                if (rtn && rtn.code != 1) {
                    Alert("获取数据失败");
                    return;
                }
                var list = rtn.data.list;
                if (!list) {
                    return;
                }
                $("#mixer-container-0,#mixer-container-1").empty();
                var even = [], odd = [];
                for (var i = 0; i < list.length; i++) {
                    if (i % 2 != 0) {
                        even.push(list[i]);
                        continue;
                    }
                    odd.push(list[i]);
                }
                rtn["even"] = even;
                rtn["odd"] = odd;
                rtn["ctx"] = ctx;
                $("#mixer-template-0").tmpl(rtn).appendTo('#mixer-container-0');
                $("#mixer-template-1").tmpl(rtn).appendTo('#mixer-container-1');

                var totalPage = Math.ceil(rtn.data.total / pageSize); // 总页数
                $("#pager").empty().zPager(
                    {
                        totalData: rtn.data.total, // 总记录数
                        pageData: pageSize, // 每页展示记录数
                        pageCount: totalPage, // 总页码
                        current: page // 当前页码
                    }
                );
            });
        };

        loadPage(1);
    });
</script>
</body>
</html>

